<template>
  <div>
    <a-form-item label="编辑地址" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-input style="width: 80%" v-model="myUrl" @input="setTargetUrl"></a-input>
      <a-button style="margin-right:5px;margin-left: 20px;display: inline-block" type="primary" @click="toLubanH5()">
        编辑
      </a-button>
    </a-form-item>
    <div>
      <iframe style="width: 100%;height:600px" :src="targetUrl"></iframe>
    </div>
  </div>
</template>

<script>
  import debounce from 'lodash/debounce';

  export default {
    name: "H5Editor",
    props: ['htmlUrl'],
    model: {
      prop: 'htmlUrl',
      event: 'change'
    },
    data() {
      this.setTargetUrl = debounce(this.setTargetUrl, 2000);
      return {
        targetUrl: '',
        myUrl: ''
      }
    },
    created() {
      this.myUrl = this.htmlUrl;
      this.targetUrl = this.htmlUrl;
    },
    methods: {
      toLubanH5() {
        window.open('http://120.53.104.37:1337/', '_blank')
      },
      setTargetUrl() {
        this.targetUrl = this.myUrl;
        this.$emit('change', this.targetUrl);
      },
    }
  }
</script>

<style scoped>

</style>